﻿@namespace AntDesign.Pro.Pages
@layout UserLayout
@page "/user/login"

<div class="login-container">
    <Form Model="@_model">
        <Tabs Class="tabs">
            <TabPane Key="1">
                <Tab>账户密码登录</Tab>
                <ChildContent>
                    <FormItem>
                        <Input Placeholder="用户名" @bind-Value="@context.UserName" Size="@InputSize.Large"><Prefix><Icon Type="user" /></Prefix></Input >
                    </FormItem>
                    <FormItem>
                        <Input Placeholder="密码" @bind-Value="@context.Password" Type="password" Size="@InputSize.Large"><Prefix><Icon Type="lock" /></Prefix></Input >
                    </FormItem>
                </ChildContent>
            </TabPane>
            <TabPane Key="2">
                <Tab>手机号登录</Tab>
                <ChildContent>
                    <FormItem>
                        <Input Placeholder="用户名" @bind-Value="@context.UserName" Size="@InputSize.Large"><Prefix><Icon Type="user" /></Prefix></Input >
                    </FormItem>
                    <FormItem>
                        <Row Gutter="8">
                            <Col Span="16">
                                <Input Placeholder="验证码" @bind-Value="@context.Captcha" Size="@InputSize.Large"><Prefix><Icon Type="mail"/></Prefix></Input >
                            </Col>
                            <Col Span="8">
                                <Button Size="large" Block>发送验证码</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </ChildContent>
            </TabPane>
        </Tabs>

        <FormItem>
            <Row>
                <Col Span="12"><Checkbox>记住我</Checkbox></Col>
                <Col Span="12" class="text-right">忘记密码?</Col>
            </Row>
        </FormItem>

        <FormItem>
            <Button Type="primary" Size="large" Block OnClick="NavLogin">登录</Button>
        </FormItem>
    </Form>
    
    <div class="other">
        其它方式
        <Icon Type="alipay-circle" />
        <Icon Type="taobao-circle" />
        <Icon Type="weibo-circle" />
        <a class="register" href="/user/register">注册</a>
    </div>
</div>